﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <#include "../inc/head.ftl"/>
    <@head/>
</head>
<body>
    <div id="wrapper">
        <#include "../inc/head_nav.ftl"/>
        <@head_nav/>
        <!--/. NAV TOP  -->
        <#include "../inc/nav.ftl"/>
        <@nav/>

        <!-- /. NAV SIDE  -->
        <div id="page-wrapper">
		  <div class="header">
              <h1 class="page-header">
                  服装店POS
              </h1>
              <ol class="breadcrumb">
                  <li><a href="/index">Home</a></li>
                  <li><a href="#">User</a></li>

              </ol>

          </div>
            <div id="page-inner"> 
                <div class="row">
			     <div class="col-md-12">
        			<div class="panel panel-default">
        				<div class="panel-heading">
        				 用户管理
        				</div>        
							  
							<div class="panel-body"> 
								<div class="btn-group">
								   <table width="60%" class="table " >
			                        <tr>
			                            <td width="50px"><button id="addUser" class="btn btn-success">新增</button></td>
			                            <td width="50px"><button id="editUser" class="btn btn-info">授权用户</button></td>
			                            <td width="50px"><button id="deleUser" class="btn btn-danger">删除</button></td>
			                           
			                        </tr>
                   				 </table>
								</div>
							</div>
				    </div>
			     </div>	
			 </div>	
			 <div class="row">
			     <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                        </div>        
                                      
                        <div class="panel-body"> 
                            <table width="100%" class="table table-striped table-bordered table-hover" id="list">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>用户名</th>
                                        <th>权限</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                   
                	  </div>
            		</div>
                 </div>	
            </div>		
             <!-- /. ROW  -->
				<footer><p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p></footer>		
			</div>	
				
             <!-- /. PAGE INNER  -->
            </div>
         <!-- /. PAGE WRAPPER  -->
        </div>
     <!-- /. WRAPPER  -->
     </div>
    <!-- JS Scripts-->
    <#include "../inc/foot.ftl"/>
    <@foot/>
  <script>
    $(document).ready(function() {
    	var table = $('#list').DataTable({
        	"ajax": '/user/list',
        	"language": {
    			"url": "/vendor/datatables/i18n/Chinese.json"
			},
            "columns": [
                 {"data": "id"},
    			 {"data": "username"},
                 {"data": "role.rolename"}
    	   ],
           responsive: true,
           select: true //datatables select 插件
        });

    	$('#addUser').click( function () {
    		layer.open({  //layer弹出层
    			  type: 2,
    			  title:"增加用户",
    			  area: ['400px', '380px'],
    			  fixed: false, //不固定
    			  maxmin: true,
    			  content: '/user/add',
    			  end : function(index){
    				  table.ajax.reload();
    			  }
    		});
        } );
    	$('#editUser').click( function () {
    		var rowData =table.rows( { selected: true } ).data().toArray();
	   		 if(rowData.length==1){
	   			var id = rowData[0].id;
	   			layer.open({
	    			  type: 2,
	    			  title:"更改用户角色",
	    			  area: ['400px', '300px'],
	    			  fixed: false, //不固定
	    			  maxmin: true,
	    			  content:'/user/edit?id='+id,
	    			  end : function(index){
	    				  table.ajax.reload();
	    			  } 
	    		});
	   		 }else{
	   			 layer.msg('请选择一行!', {time: 1000, icon:7});
	   		 }
    	 });

    	$('#deleUser').click( function () {
    		var rowData =table.rows( { selected: true } ).data().toArray();
	   		 if(rowData.length==1){
	   			var id = rowData[0].id;
                 $.ajax({
                     async: false,
                     cache: false,
                     url:'/user/delete/'+id,
                     dataType: "json",
                     type: 'POST',
                     success: function (data) {
                         if(data.result){
                             parent.layer.msg(data.msg, {time: 1000, icon:1});
                         }else{
                             parent.layer.msg(data.msg, {time: 1000, icon:2});
                         }
                         table.ajax.reload();
                     }
                 });
	   		 }else{
	   			 layer.msg('请选择一行!', {time: 1000, icon:7});
	   		 }
    	 });
    	
    });

    </script> 
</body>
</html>
